<div class="container-fluid">
  <div class="row mb-4">
    <div class="col-12">
      <h2 class="mb-3">
        <i class="bi bi-graph-up-arrow text-primary"></i> Performance Reviews
      </h2>
      <p class="text-muted">Track your performance history and feedback</p>
    </div>
  </div>

  <!-- Performance Summary Stats -->
  <div class="row g-3 mb-4">
    <%
      total_reviews = @perf.count
      avg_score = @perf.any? ? (@perf.sum(&:score).to_f / total_reviews).round(1) : 0
      latest_score = @perf.last&.score || 0
      highest_score = @perf.any? ? @perf.max_by(&:score).score : 0
    %>

    <div class="col-lg-3 col-md-6">
      <div class="card shadow-sm text-center hover-stat-card" style="border-top: 4px solid #579da9;">
        <div class="card-body p-4">
          <div class="mb-3">
            <i class="bi bi-star-fill" style="font-size: 2.5rem; color: #579da9;"></i>
          </div>
          <h6 class="text-muted text-uppercase mb-2" style="font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px;">
            Average Score
          </h6>
          <h2 class="mb-0" style="color: #579da9; font-weight: 700; font-size: 2.5rem;">
            <%= avg_score %>
          </h2>
          <p class="text-muted mt-2 mb-0 small">Out of 5.0</p>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6">
      <div class="card shadow-sm text-center hover-stat-card" style="border-top: 4px solid var(--rg-primary);">
        <div class="card-body p-4">
          <div class="mb-3">
            <i class="bi bi-trophy-fill" style="font-size: 2.5rem; color: var(--rg-primary);"></i>
          </div>
          <h6 class="text-muted text-uppercase mb-2" style="font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px;">
            Highest Score
          </h6>
          <h2 class="mb-0" style="color: var(--rg-primary); font-weight: 700; font-size: 2.5rem;">
            <%= highest_score %>
          </h2>
          <p class="text-muted mt-2 mb-0 small">Best performance</p>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6">
      <div class="card shadow-sm text-center hover-stat-card" style="border-top: 4px solid #1e825e;">
        <div class="card-body p-4">
          <div class="mb-3">
            <i class="bi bi-calendar-check-fill" style="font-size: 2.5rem; color: #1e825e;"></i>
          </div>
          <h6 class="text-muted text-uppercase mb-2" style="font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px;">
            Latest Score
          </h6>
          <h2 class="mb-0" style="color: #1e825e; font-weight: 700; font-size: 2.5rem;">
            <%= latest_score %>
          </h2>
          <p class="text-muted mt-2 mb-0 small">Most recent review</p>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6">
      <div class="card shadow-sm text-center hover-stat-card" style="border-top: 4px solid #b5799e;">
        <div class="card-body p-4">
          <div class="mb-3">
            <i class="bi bi-file-earmark-text-fill" style="font-size: 2.5rem; color: #b5799e;"></i>
          </div>
          <h6 class="text-muted text-uppercase mb-2" style="font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px;">
            Total Reviews
          </h6>
          <h2 class="mb-0" style="color: #b5799e; font-weight: 700; font-size: 2.5rem;">
            <%= total_reviews %>
          </h2>
          <p class="text-muted mt-2 mb-0 small">Performance evaluations</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Performance Timeline -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="card shadow-sm">
        <div class="card-header bg-white py-3">
          <h4 class="mb-0">
            <i class="bi bi-graph-up text-primary"></i> Performance Trend
          </h4>
          <p class="text-muted mb-0 small mt-1">Your performance scores over time</p>
        </div>
        <div class="card-body p-4">
          <% if @perf.any? %>
            <div class="performance-timeline">
              <% @perf.each_with_index do |p, index| %>
                <%
                  score_percentage = (p.score.to_f / 5.0) * 100
                  score_color = case p.score
                    when 5 then '#1e825e'
                    when 4 then '#579da9'
                    when 3 then '#ffb703'
                    else '#e26666'
                  end
                %>
                <div class="timeline-item" style="animation-delay: <%= index * 0.1 %>s;">
                  <div class="timeline-marker">
                    <div class="timeline-date">
                      <small class="text-muted"><%= p.date_submitted %></small>
                    </div>
                    <div class="timeline-dot" style="background-color: <%= score_color %>;">
                      <span style="font-weight: 700; color: white; font-size: 0.9rem;"><%= p.score %></span>
                    </div>
                    <div class="timeline-reviewer">
                      <small class="text-muted"><%= p.reviewer_name %></small>
                    </div>
                  </div>
                  <div class="timeline-content">
                    <div class="progress" style="height: 30px; border-radius: 15px;">
                      <div class="progress-bar" role="progressbar"
                           style="width: <%= score_percentage %>%; background-color: <%= score_color %>; font-weight: 600; font-size: 1rem;"
                           aria-valuenow="<%= p.score %>" aria-valuemin="0" aria-valuemax="5">
                        <%= p.score %> / 5 - <%= p.comments %>
                      </div>
                    </div>
                  </div>
                </div>
              <% end %>
            </div>
          <% else %>
            <div class="text-center text-muted py-5">
              <i class="bi bi-graph-up" style="font-size: 3rem; opacity: 0.3;"></i>
              <p class="mt-3 mb-0">No performance data to display</p>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  </div>

  <!-- Performance History Table -->
  <div class="row">
    <div class="col-12">
      <div class="card shadow-sm">
        <div class="card-header bg-white py-3">
          <h4 class="mb-0">
            <i class="bi bi-table text-primary"></i> Performance History
          </h4>
          <p class="text-muted mb-0 small mt-1">Detailed review feedback and comments</p>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th style="width: 20%;">
                    <i class="bi bi-person-badge me-2"></i>Reviewer
                  </th>
                  <th style="width: 15%;">
                    <i class="bi bi-calendar-event me-2"></i>Date
                  </th>
                  <th style="width: 10%;">
                    <i class="bi bi-star me-2"></i>Score
                  </th>
                  <th style="width: 55%;">
                    <i class="bi bi-chat-left-text me-2"></i>Comments
                  </th>
                </tr>
              </thead>
              <tbody>
                <% if @perf.any? %>
                  <% @perf.each do |p| %>
                    <tr>
                      <td class="fw-semibold">
                        <div class="d-flex align-items-center">
                          <div class="rounded-circle bg-primary bg-opacity-10 p-2 me-2">
                            <i class="bi bi-person-fill text-primary"></i>
                          </div>
                          <%= p.reviewer_name %>
                        </div>
                      </td>
                      <td>
                        <span class="badge bg-light text-dark">
                          <i class="bi bi-calendar-date me-1"></i><%= p.date_submitted %>
                        </span>
                      </td>
                      <td>
                        <%
                          score_color = case p.score
                            when 5 then 'success'
                            when 4 then 'primary'
                            when 3 then 'warning'
                            else 'danger'
                          end
                        %>
                        <span class="badge bg-<%= score_color %>" style="font-size: 1rem; padding: 0.5rem 0.75rem;">
                          <%= p.score %> / 5
                        </span>
                      </td>
                      <td>
                        <div class="text-muted">
                          <%= p.comments %>
                        </div>
                      </td>
                    </tr>
                  <% end %>
                <% else %>
                  <tr>
                    <td colspan="4" class="text-center text-muted py-5">
                      <i class="bi bi-inbox" style="font-size: 3rem; opacity: 0.3;"></i>
                      <p class="mt-3 mb-0">No performance reviews available yet</p>
                    </td>
                  </tr>
                <% end %>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
function makeActive(){
  $('li[id="performance"]').addClass('active');
}

$(document).ready(function() {
  makeActive();
});

// Handle Turbolinks page loads
$(document).on('turbolinks:load', function() {
  makeActive();
});
</script>

<style>
  .hover-stat-card {
    transition: all 0.3s ease;
  }

  .hover-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  }

  .hover-stat-card h2 {
    transition: transform 0.3s ease;
  }

  .hover-stat-card:hover h2 {
    transform: scale(1.05);
  }

  .table tbody tr {
    transition: background-color 0.2s ease;
  }

  .table tbody tr:hover {
    background-color: rgba(230, 57, 70, 0.03);
  }

  /* Performance Timeline Styles */
  .performance-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .timeline-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
    gap: 0.5rem;
  }

  .timeline-dot {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
  }

  .timeline-item:hover .timeline-dot {
    transform: scale(1.15);
  }

  .timeline-content {
    flex: 1;
  }

  .timeline-date, .timeline-reviewer {
    text-align: center;
    white-space: nowrap;
  }

  .progress {
    transition: transform 0.3s ease;
  }

  .timeline-item:hover .progress {
    transform: translateX(5px);
  }

  @media (max-width: 768px) {
    .timeline-item {
      flex-direction: column;
      text-align: center;
    }

    .timeline-marker {
      min-width: auto;
    }
  }
</style>
